<template>
	<view class="page">
		<view class="team-summary bg-w pd30 mb20">
			<view class="summary-header">
				<view class="summary-title">我的团队</view>
				<view class="join-time">加入时间：{{joinTime}}</view>
			</view>
			
			<view class="team-stats">
				<view class="stat-card">
					<view class="stat-value">{{teamStats.totalCount}}</view>
					<view class="stat-label">团队总数</view>
				</view>
				<view class="stat-card">
					<view class="stat-value">{{teamStats.directCount}}</view>
					<view class="stat-label">直推人数</view>
				</view>
				<view class="stat-card">
					<view class="stat-value">{{teamStats.indirectCount}}</view>
					<view class="stat-label">间推人数</view>
				</view>
				<view class="stat-card">
					<view class="stat-value">¥{{teamStats.teamCommission}}</view>
					<view class="stat-label">团队佣金</view>
				</view>
			</view>
		</view>
		
		<view class="bg-w pd30 mb20">
			<view class="section-header">
				<view class="section-title">团队成员</view>
				<view class="invite-btn" @click="inviteMember">
					<text class="iconfont">+</text>
					<text>邀请成员</text>
				</view>
			</view>
			
			<view class="member-list">
				<view v-for="(item, index) in memberList" :key="index" class="member-item">
					<view class="member-avatar">
						<image :src="item.avatar" mode="aspectFill" class="avatar"></image>
						<view v-if="item.isDirect" class="direct-badge">直推</view>
					</view>
					<view class="member-info">
						<view class="member-name">{{item.name}}</view>
						<view class="member-stats">
							<text class="stat">团队{{item.teamSize}}人</text>
							<text class="stat">佣金¥{{item.commission}}</text>
						</view>
					</view>
					<view class="member-time">{{item.joinTime}}</view>
				</view>
			</view>
			
			<view v-if="memberList.length === 0" class="empty-members">
				<view class="empty-text">暂无团队成员</view>
				<view class="empty-desc">邀请好友加入，获得团队佣金</view>
			</view>
		</view>
		
		<view class="bg-w pd30 mb20">
			<view class="section-title">团队业绩</view>
			
			<view class="performance-cards">
				<view class="performance-card">
					<view class="card-title">今日业绩</view>
					<view class="card-value">¥{{performance.today}}</view>
					<view class="card-change" :class="performance.todayChange >= 0 ? 'positive' : 'negative'">
						<text class="iconfont">{{performance.todayChange >= 0 ? '↑' : '↓'}}</text>
						<text>{{Math.abs(performance.todayChange)}}%</text>
					</view>
				</view>
				
				<view class="performance-card">
					<view class="card-title">本月业绩</view>
					<view class="card-value">¥{{performance.month}}</view>
					<view class="card-change" :class="performance.monthChange >= 0 ? 'positive' : 'negative'">
						<text class="iconfont">{{performance.monthChange >= 0 ? '↑' : '↓'}}</text>
						<text>{{Math.abs(performance.monthChange)}}%</text>
					</view>
				</view>
			</view>
			
			<view class="chart-section">
				<view class="chart-title">团队业绩趋势</view>
				<view class="chart-placeholder">
					<text>图表展示区域</text>
				</view>
			</view>
		</view>
		
		<view class="bg-w pd30 mb20">
			<view class="section-title">邀请奖励</view>
			
			<view class="reward-info">
				<view class="reward-item">
					<view class="reward-title">邀请好友成为分销商</view>
					<view class="reward-desc">获得其销售额的5%作为团队佣金</view>
				</view>
				<view class="reward-item">
					<view class="reward-title">邀请5人团队</view>
					<view class="reward-desc">额外获得100元奖励</view>
				</view>
				<view class="reward-item">
					<view class="reward-title">邀请20人团队</view>
					<view class="reward-desc">额外获得500元奖励</view>
				</view>
			</view>
			
			<button class="btn-main" @click="shareInvite">立即邀请好友</button>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';

export default {
	data() {
		return {
			joinTime: '2024-01-01',
			teamStats: {
				totalCount: 23,
				directCount: 12,
				indirectCount: 11,
				teamCommission: '890.50'
			},
			performance: {
				today: '1,234.56',
				todayChange: 12.5,
				month: '15,678.90',
				monthChange: 8.3
			},
			memberList: [
				{
					id: 1,
					name: '张先生',
					avatar: 'https://picsum.photos/seed/member1/80/80.jpg',
					isDirect: true,
					teamSize: 5,
					commission: '345.60',
					joinTime: '2024-01-10'
				},
				{
					id: 2,
					name: '李女士',
					avatar: 'https://picsum.photos/seed/member2/80/80.jpg',
					isDirect: true,
					teamSize: 3,
					commission: '234.50',
					joinTime: '2024-01-12'
				},
				{
					id: 3,
					name: '王先生',
					avatar: 'https://picsum.photos/seed/member3/80/80.jpg',
					isDirect: false,
					teamSize: 2,
					commission: '156.80',
					joinTime: '2024-01-15'
				},
				{
					id: 4,
					name: '赵女士',
					avatar: 'https://picsum.photos/seed/member4/80/80.jpg',
					isDirect: false,
					teamSize: 1,
					commission: '89.90',
					joinTime: '2024-01-18'
				}
			]
		};
	},
	computed: {
		...mapState(['memberInfo']),
		isLogin() {
			return this.memberInfo == null ? false : true;
		}
	},
	onLoad() {
		this.loadTeamData();
	},
	methods: {
		loadTeamData() {
			// 实际项目中这里会调用API
		},
		
		inviteMember() {
			this.shareInvite();
		},
		
		shareInvite() {
			const inviteLink = `https://demo.woyaou.com/register?inviter=${this.memberInfo.id}`;
			const inviteText = `加入我们的分销团队，一起赚钱！邀请链接：${inviteLink}`;
			
			uni.showActionSheet({
				itemList: ['复制邀请链接', '分享给好友'],
				success: (res) => {
					if (res.tapIndex === 0) {
						uni.setClipboardData({
							data: inviteLink,
							success: () => {
								uni.showToast({ title: '邀请链接已复制', icon: 'success' });
							}
						});
					} else if (res.tapIndex === 1) {
						uni.share({
							provider: 'weixin',
							scene: 'WXSceneSession',
							type: 0,
							href: inviteLink,
							title: '邀请你加入分销团队',
							summary: '一起分销商品，轻松赚钱！',
							success: () => {
								uni.showToast({ title: '分享成功', icon: 'success' });
							}
						});
					}
				}
			});
		}
	}
};
</script>

<style>
.team-summary {
	background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
	color: white;
	border-radius: 12rpx;
}

.summary-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.summary-title {
	font-size: 32rpx;
	font-weight: 600;
}

.join-time {
	font-size: 24rpx;
	opacity: 0.9;
}

.team-stats {
	display: flex;
	justify-content: space-between;
}

.stat-card {
	flex: 1;
	text-align: center;
	padding: 20rpx 0;
}

.stat-value {
	font-size: 32rpx;
	font-weight: 600;
	margin-bottom: 8rpx;
}

.stat-label {
	font-size: 24rpx;
	opacity: 0.9;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.section-title {
	font-size: 28rpx;
	color: #333;
	font-weight: 600;
}

.invite-btn {
	display: flex;
	align-items: center;
	color: #007aff;
	font-size: 26rpx;
}

.invite-btn .iconfont {
	margin-right: 5rpx;
}

.member-list {
	margin-top: 20rpx;
}

.member-item {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}

.member-item:last-child {
	border-bottom: none;
}

.member-avatar {
	position: relative;
	margin-right: 20rpx;
}

.avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
}

.direct-badge {
	position: absolute;
	top: -5rpx;
	right: -5rpx;
	background: #ff4757;
	color: white;
	font-size: 20rpx;
	padding: 2rpx 8rpx;
	border-radius: 8rpx;
}

.member-info {
	flex: 1;
}

.member-name {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 8rpx;
}

.member-stats {
	font-size: 24rpx;
	color: #999;
}

.member-stats .stat {
	margin-right: 20rpx;
}

.member-time {
	font-size: 24rpx;
	color: #999;
}

.empty-members {
	text-align: center;
	padding: 60rpx 0;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
	margin-bottom: 10rpx;
}

.empty-desc {
	font-size: 24rpx;
	color: #ccc;
}

.performance-cards {
	display: flex;
	gap: 20rpx;
	margin-bottom: 40rpx;
}

.performance-card {
	flex: 1;
	background: #f8f9fa;
	border-radius: 12rpx;
	padding: 25rpx 20rpx;
	text-align: center;
}

.card-title {
	font-size: 24rpx;
	color: #666;
	margin-bottom: 15rpx;
}

.card-value {
	font-size: 32rpx;
	color: #333;
	font-weight: 600;
	margin-bottom: 10rpx;
}

.card-change {
	font-size: 24rpx;
}

.card-change.positive {
	color: #2ed573;
}

.card-change.negative {
	color: #ff6b6b;
}

.chart-section {
	margin-top: 30rpx;
}

.chart-title {
	font-size: 26rpx;
	color: #333;
	margin-bottom: 20rpx;
}

.chart-placeholder {
	height: 200rpx;
	background: #f5f5f5;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999;
	font-size: 24rpx;
}

.reward-info {
	margin: 30rpx 0;
}

.reward-item {
	margin-bottom: 20rpx;
	padding-bottom: 20rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.reward-item:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.reward-title {
	font-size: 28rpx;
	color: #333;
	font-weight: 600;
	margin-bottom: 8rpx;
}

.reward-desc {
	font-size: 24rpx;
	color: #666;
}
</style>